<template>
    <view style="background: #FAFAFB; height: 100vh;">
        <view class="title">问题类型</view>
        <view class="box">
            <view :class="num==index? 'choice':'like' " v-for="(item,index) in like" :key="index" @click="choice(item,index)">
                {{item}}
            </view>
        </view>
        <view class="msg">
            <textarea value="" v-model="form.content" placeholder="请填写10-100字描述,以便我们提供更好的帮助" maxlength="100" placeholder-class="placeholder" />
        </view>
        <view class="photoBox">
            <view class="addPhoto" @click="openMessage">
                <!-- <view class="xiangj" ></view> -->
                <view class="iconfont icon-paishe xiangji">
                </view>
            </view>
            <view v-if="photo.length>0">
                <view class="photo" v-for="(item,index) in photo" :key="index" style="background-color: rgba(243, 246, 246, 1);" @click.prevent="clickImg(index)">
                    <image :src="item" mode="aspectFit"></image>
                    <text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
                </view>
            </view>
        </view>
        <view class="" v-show="bol" style="transition:  1s all;">
            <view class="phone">
                <view class="phoneTitle">手机号</view>
                <input type="number" value="" v-model="phone" maxlength="11" placeholder="请填写您的手机号" placeholder-class="placeholder" />
            </view>
            <view class="phone">
                <view class="emailTitle">邮箱</view>
                <input type="text" value="" v-model="email" maxlength="30" placeholder="请填写您的邮箱" placeholder-class="placeholder" />
            </view>
        </view>
        <label class="radio" @click="change">
            <radio color="#3c8eff" value="" style="transform:scale(0.5)" :checked="bol" /><text>允许开发者在48小时内联系我</text>
        </label>

        <view class="btn">
            <view type="default" @click="save">提交</view>
            <!-- <button type="default" @click="addSave"></button> -->
        </view>
        <uni-popup ref="message" type="center">
            <view class="permission-bc" style="width: 540rpx;height:676rpx">
                <view style="height: 73%;"></view>
                <view @click="add" class="d-center" style="height: 78rpx;color: #fff;font-size: 32rpx;">马上开启</view>
                <view @click="closeMessage" class="d-center" style="height: 78rpx;font-size: 28rpx;color: #999999;">以后再说</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import permision from '@/common/js/permission.js'
import { validatePhone, validateEmail } from '@/common/js/validate.js'
import uploadImage from '@/common/js/ossutil/uploadFile.js'
import { feedback } from '@/apis/nurse/index.js'
import { requestAndroid } from '@/common/js/location.js'
import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
export default {
    data() {
        return {
            loc: -1,
            num: NaN,
            //详细描述
            value: '',
            //是否允许联系
            bol: false,
            //问题类型index
            str: '',
            like: ['功能异常', '产品体验', '交易问题', '其他'],
            photo: [],
            phone: '',
            email: '',
            form: {
                content: '',
                feedbackId: this.$store.state.userInfo.id,
                feedbackJson: '',
                feedbackType: '',
                userType: 1, //用户端
                callStatus: 0,
            },
        }
    },
    watch: {
        photo(newVal, oldVal) {
            if (newVal.length > 10) {
                this.photo = this.photo.splice(0, 10)
                plus.nativeUI.toast('最多添加10张图片!')
                // uni.showToast({
                // 	icon:'none',
                // 	title:'最多添加10张图片',
                // 	duration:2000,
                // })
            }
        },
    },
    components: {
        uniPopup,
    },
    onLoad(options) {
        this.getMision()
    },
    onShow() {
        this.getMision()
    },
    methods: {
        async getMision() {
            if (uni.getSystemInfoSync().platform == 'android') {
                // 安卓权限查询
                this.loc = await permision.checkAndroidSelfPermission(
                    'android.permission.WRITE_EXTERNAL_STORAGE'
                )
                console.log('anzhuo', this.loc)
            }
        },
        openMessage() {
            let that = this
            if (this.loc == -1) {
                that.$refs.message.open()
            } else {
                that.add()
            }
        },
        closeMessage() {
            this.$refs.message.close()
        },
        //是否允许打电话
        change() {
            this.bol = !this.bol
            console.log(this.bol)
            this.form.callStatus = this.bol ? 1 : 0
            console.log(this.form.callStatus)
        },
        //选择问题类型
        choice(item, index) {
            this.num = index
            this.str = item
            this.form.feedbackType = index
        },
        //添加照片
        add() {
            let that = this
            if (that.loc == -1) {
                this.closeMessage()
            }
            if (this.photo.length > 10 || this.photo.length == 10) {
                plus.nativeUI.toast('最多添加10张图片!')
                // uni.showToast({
                // 	icon:'none',
                // 	title:'最多添加10张图片',
                // 	duration:1000,
                // })
            } else {
                uni.chooseImage({
                    count: 10, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],
                    // sourceType: ['album'], //从相册选择
                    success: function (res) {
                        console.log(res, '..................')
                        let tempFiles = res.tempFilePaths
                        uni.showLoading({
                            title: '上传中……',
                        })
                        //上传图片 请求多个图片
                        for (var i = 0; i < tempFiles.length; i++) {
                            uploadImage(
                                tempFiles[i],
                                'feedback/',
                                (result) => {
                                    console.log('打印的结果', result)
                                    that.bol = false
                                    that.url = result
                                    that.photo.push(result) //如果图片一次性就超过这个值怎么使他赋的值回退
                                    uni.hideLoading()
                                },
                                (error) => {
                                    plus.nativeUI.toast('上传失败')
                                    // uni.showToast({
                                    // 	title:'上传失败',
                                    // 	icon:'error'
                                    // })
                                }
                            )
                        }
                    },
                    fail(e) {
                        if (e.errCode == 11) {
                            requestAndroid(
                                'android.permission.CAMERA',
                                '摄像头'
                            )
                        }
                        // console.log(e,'shibaihuid........')
                    },
                })
            }
        },
        //删除照片
        del(index) {
            uni.showModal({
                title: '确认删除当前图片吗',
                confirmColor: '#FF6A00',
                success: (res) => {
                    if (res.confirm) {
                        this.photo.splice(index, 1)
                    }
                },
            })
        },
        //图片预览
        clickImg(index) {
            let _this = this
            wx.previewImage({
                urls: _this.photo,
                current: _this.photo[index], // 当前显示图片的http链接，默认是第一个
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {},
            })
        },
        //保存上传
        save() {
            let _this = this
            console.log(this.form, 'from')
            if (
                !this.str ||
                this.form.content.length < 10 ||
                this.photo.length < 1
            ) {
                if (!this.str) {
                    plus.nativeUI.toast('请选择问题类型')
                    // 	uni.showToast({
                    // 	title:'请选择问题类型',
                    // 	icon:'none'
                    // })
                    console.log(this.str)
                } else if (this.form.content.length < 10) {
                    plus.nativeUI.toast('请填写10字以上描述')
                    // uni.showToast({
                    // 	title:'请填写10字以上描述',
                    // 	icon:'none'
                    // })
                } else if (this.photo.length < 1) {
                    plus.nativeUI.toast('请上传1-10张图片说明')
                    // uni.showToast({
                    // 	title:'请上传1-10张图片说明',
                    // 	icon:'none'
                    // })
                }
            } else if (this.bol) {
                if (this.phone) {
                    this.form.mobile = this.phone
                }
                if (this.email) {
                    this.form.email = this.email
                }
                if (validatePhone(_this.phone) || validateEmail(_this.email)) {
                    this.upload()
                } else {
                    plus.nativeUI.toast('请填写正确的手机号/邮箱')
                    // uni.showToast({
                    // 	title:'请填写正确的手机号/邮箱',
                    // 	icon:'none'
                    // })
                }
            } else {
                this.upload()
            }
        },
        //上传
        async upload() {
            this.form.feedbackJson = this.photo.join(',')
            console.log(this.form, '点击保存了吗')
            let res = await feedback(this.form)
            console.log(res, '反馈')
            if (res.success) {
                plus.nativeUI.toast('反馈成功，我们会尽快处理您的问题')
                // uni.showToast({
                // 	title:'反馈成功，我们会尽快处理您的问题。',
                // 	icon:'none'
                // })
                setTimeout(() => {
                    uni.navigateBack({
                        delta: 1,
                    })
                }, 300)
            }
        },
    },
}
</script>

<style scoped lang="less">
.title {
    width: 750rpx;
    height: 130rpx;
    background: #ffffff;
    padding-top: 58rpx;
    padding-left: 40rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #16181a;
    box-sizing: border-box;
}

.box {
    width: 750rpx;
    height: 108rpx;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx 28rpx;
    box-sizing: border-box;
    background: #ffffff;

    .like {
        height: 60rpx;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 37rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
        line-height: 60rpx;
        padding: 0 28rpx;
    }
}

.msg {
    width: 750rpx;
    height: 212rpx;
    background: #ffffff;
    box-sizing: border-box;

    textarea {
        width: 670rpx;
        height: 180rpx;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 20rpx;
        margin: 0 auto;
        padding: 24rpx;
        box-sizing: border-box;
    }

    .placeholder {
        font-size: 28rpx;
        font-weight: 400;
        color: #bdbdbd;
    }
}

.photoBox {
    padding: 24rpx 42rpx;
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    margin-bottom: 8rpx;

    .addPhoto {
        width: 128rpx;
        height: 128rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        border: 2rpx dashed rgba(0, 0, 0, 0.87);
        margin-right: 26rpx;
        margin-bottom: 26rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo {
        width: 128rpx;
        height: 128rpx;
        border-radius: 20rpx;
        margin-right: 26rpx;
        margin-bottom: 26rpx;
        position: relative;

        image {
            // width: auto;
            // height: auto;
            // max-width: 128rpx;
            // max-height: 128rpx;
            width: 128rpx;
            height: 128rpx;
            border-radius: 20rpx;
        }

        .cha {
            position: absolute;
            font-size: 48rpx;
            right: -20rpx;
            top: -25rpx;
        }
    }
}

.choice {
    background-color: #3c8eff;
    height: 60rpx;
    border-radius: 37rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 60rpx;
    padding: 0 28rpx;
}

.phone {
    width: 750rpx;
    height: 108rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 40rpx;
    box-sizing: border-box;

    .phoneTitle {
        margin-right: 64rpx;
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
    }

    .emailTitle {
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
        margin-right: 96rpx;
    }
}

.placeholder {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.1);
}

.radio {
    display: block;
    // margin-left: 170rpx;
    // margin:0 auto;
    margin-top: 44rpx;
    padding-left: 162rpx;

    text {
        // margin-left: 8rpx;
        height: 40rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        line-height: 40rpx;
    }
}

.btn {
    box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
    width: 750rpx;
    height: 122rpx;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-around;
    align-items: center;
    // margin-top: 300rpx;
    position: fixed;
    bottom: 0;

    view {
        width: 670rpx;
        height: 90rpx;
        background: #3c8eff;
        border-radius: 20rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 90rpx;
        text-align: center;
    }
}
.permission-bc {
    background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/5b089870931e40cd.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
</style>